<template>
  <div class="order-confirm">
    <el-card class="address-card">
      <template #header>
        <div class="card-header">
          <span>收货地址</span>
        </div>
      </template>
      <el-form ref="addressForm" :model="addressForm" :rules="rules" label-width="100px">
        <el-form-item label="收货人" prop="receiverName">
          <el-input v-model="addressForm.receiverName" placeholder="请输入收货人姓名" />
        </el-form-item>
        <el-form-item label="手机号码" prop="receiverPhone">
          <el-input v-model="addressForm.receiverPhone" placeholder="请输入手机号码" />
        </el-form-item>
        <el-form-item label="收货地址" prop="receiverAddress">
          <el-input
            v-model="addressForm.receiverAddress"
            type="textarea"
            placeholder="请输入详细地址"
          />
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="product-card">
      <template #header>
        <div class="card-header">
          <span>商品信息</span>
        </div>
      </template>
      <div class="product-info" v-if="product">
        <div class="product-image">
          <el-image :src="product.mainImage" fit="cover" />
        </div>
        <div class="product-detail">
          <h3>{{ product.productName }}</h3>
          <p class="price">￥{{ product.price }}</p>
          <div class="quantity">
            <span>购买数量：</span>
            <el-input-number v-model="quantity" :min="1" :max="product.stock" />
          </div>
        </div>
      </div>
    </el-card>

    <el-card class="order-summary">
      <div class="total-amount">
        <span>订单总额：</span>
        <span class="price">￥{{ totalAmount }}</span>
      </div>
      <div class="actions">
        <el-button type="primary" @click="submitOrder">提交订单</el-button>
        <el-button @click="$router.go(-1)">返回</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { getProduct } from '@/api/ich/product'
import { createOrder } from '@/api/ich/order'

const route = useRoute()
const router = useRouter()

const product = ref(null)
const quantity = ref(1)
const addressForm = ref({
  receiverName: '',
  receiverPhone: '',
  receiverAddress: ''
})

const rules = {
  receiverName: [
    { required: true, message: '请输入收货人姓名', trigger: 'blur' }
  ],
  receiverPhone: [
    { required: true, message: '请输入手机号码', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  receiverAddress: [
    { required: true, message: '请输入收货地址', trigger: 'blur' }
  ]
}

const totalAmount = computed(() => {
  if (product.value) {
    return (product.value.price * quantity.value).toFixed(2)
  }
  return '0.00'
})

// 获取商品信息
const getProductInfo = async () => {
  try {
    const productId = route.query.productId
    if (!productId) {
      ElMessage.error('商品信息不存在')
      router.push('/user/mall')
      return
    }
    const res = await getProduct(productId)
    if (res.code === 200) {
      product.value = res.data
      quantity.value = parseInt(route.query.quantity) || 1
    }
  } catch (error) {
    console.error('获取商品信息失败:', error)
    ElMessage.error('获取商品信息失败')
  }
}

// 提交订单
const submitOrder = async () => {
  try {
    await addressForm.value.$refs.validate()
    
    const orderData = {
      productId: product.value.productId,
      quantity: quantity.value,
      ...addressForm.value
    }
    
    const res = await createOrder(orderData)
    if (res.code === 200) {
      ElMessage.success('订单创建成功')
      router.push('/user/order/' + res.data)
    }
  } catch (error) {
    console.error('创建订单失败:', error)
    ElMessage.error('创建订单失败')
  }
}

onMounted(() => {
  getProductInfo()
})
</script>

<style lang="scss" scoped>
.order-confirm {
  padding: 20px;

  .el-card {
    margin-bottom: 20px;
  }

  .card-header {
    font-size: 16px;
    font-weight: bold;
  }

  .product-info {
    display: flex;
    gap: 20px;

    .product-image {
      width: 120px;
      height: 120px;

      .el-image {
        width: 100%;
        height: 100%;
      }
    }

    .product-detail {
      flex: 1;

      h3 {
        margin: 0 0 10px;
        font-size: 16px;
      }

      .price {
        color: #f56c6c;
        font-size: 18px;
        margin: 10px 0;
      }

      .quantity {
        display: flex;
        align-items: center;
        gap: 10px;
      }
    }
  }

  .order-summary {
    .total-amount {
      text-align: right;
      margin-bottom: 20px;

      .price {
        color: #f56c6c;
        font-size: 20px;
        font-weight: bold;
      }
    }

    .actions {
      text-align: right;
    }
  }
}
</style> 